<div class="gate-stat">
    <!--<div nz-row nzType="flex" nzJustify="space-around" style="margin-bottom: 8px;">-->
        <!--<span nz-col>闸门总数: {{ gateData.count }} 座</span>-->
        <!--<span nz-col *ngIf="type == 'jinshuizha' || type == 'zhikaikou'"-->
            <!--&gt;控制灌溉面积: {{ gateData.areaSum }} 万亩</span-->
        <!--&gt;-->
    <!--</div>-->
    <div class="general-data-card">
        <div class="grid">
            <div class="grid-card">
                <div class="top-box">
                    <div class="img-box">
                        <img src="./assets/images/searchMaintain/placeholder-icon.png" alt="">
                    </div>
                    <p class="main-num">
                        {{gateData.count}}
                    </p>

                </div>
                <p class="bottom-box">闸门总数（座）</p>
            </div>
            <div class="grid-card" *ngIf="type !== 'jiezhizha' && type !== 'tuishuizha'">
                <div class="top-box">
                    <div class="img-box">
                        <img src="./assets/images/searchMaintain/placeholder-icon.png" alt="">
                    </div>
                    <p class="main-num">
                        {{gateData.areaSum}}
                    </p>

                </div>
                <p class="bottom-box">控制灌溉面积（万亩）</p>
            </div>
        </div>
    </div>

    <ng-container *ngIf="list.length">
        <div
            echarts
            [options]="pieOpt"
            [merge]="gateTypeOptChange"
            style="height: 320px;"
        ></div>
        <div
            *ngIf="type == 'jiezhizha' || type == 'tuishuizha'"
            echarts
            [options]="pieOpt"
            [merge]="onOffTypeOptChange"
            style="height: 320px;"
        ></div>
        <div
            *ngIf="type != 'zhikaikou'"
            echarts
            [options]="scatterOpt"
            [merge]="gateCapacityOptChange"
            style="height: 213px;"
        ></div>
        <!-- <div *ngIf="type == 'zhikaikou'" echarts [options]="scatterOpt" [merge]="gateCapacityOptChange" style="height: 320px;"></div> -->
    </ng-container>
</div>
